class Flip {
  constructor (doms = []) {
    this.doms = Array.from(doms)
    this.doms.forEach((item) => {
      item.setAttribute('start', item.getBoundingClientRect().top)
    })
  }
  init () {
    this.doms = Array.from(this.doms)
    this.doms.forEach((item) => {
      item.setAttribute('start', item.getBoundingClientRect().top)
    })
  }
  play () {
    this.doms.forEach((item) => {
      item.setAttribute('end', item.getBoundingClientRect().top)
      let start = item.getAttribute('start')
      let end = item.getAttribute('end')
      let dis = start - end
      item.style.transform = `translateY(${dis}px)`
      raf(() => {
        item.style.transition = 'transform .5s'
        item.style.removeProperty('transform')
        setTimeout(() => {
          item.style.removeProperty('transition')
        }, 600)
        console.log('play')
      })
    })
  }
}

function raf (callback) {
  requestAnimationFrame(callback)
}
// 随机生成在线图片 https://source.unsplash.com/random
